import React, { Component } from 'react';
import { Modal, Button } from 'antd';
import {connect} from 'react-redux'

import {PopupActivate, IsUserLogin} from '../../redux/actions/popup'
import {DoLogin} from '../../redux/actions/login'
import { ChangeAboutMoneyActivate } from '../../redux/actions/aboutMoney';

// 本组件为一个弹窗，其中回带有（登录）和（充值，提现），两部分功能
class Pupup extends Component {

  // 点击左按钮
  handleOk_left = () => {
    const obj = {activate: false}
    console.log('点击左按钮')
    this.props.PopupActivate(obj)
  }

  // 点击右按钮
  handleOk_right = () => {
    const obj = {activate: false}
    console.log('点击右按钮')
    this.props.PopupActivate(obj)
  }

  // 点击登录后
  hadleOk_login = () => {
    const obj_popup = {activate:false}
    const obj_login = {
      activate: true
    }
    this.props.PopupActivate(obj_popup)
    this.props.DoLogin(obj_login)
  }

  // 点击退出登录
  handleOk_logout = () => {
    const obj_logout = {isLogin: false}
    this.props.IsUserLogin(obj_logout)
    const obj_popup = {activate:false}
    this.props.PopupActivate(obj_popup)
  }

  // 点击x进行取消
  handleCancel = () => {
    const obj = {activate: false}
    console.log('点击取消')
    this.props.PopupActivate(obj)
  };

  // 点击提现
  handelWithdraw = () => {
    const obj = {activate: false}
    this.props.PopupActivate(obj)
    this.props.ChangeAboutMoneyActivate({
      activate: true,
      is_withdraw: true
    })
    console.log("点击提现")
  }

  // 点击充值
  handleRecharge = () => {
    const obj = {activate: false}
    this.props.PopupActivate(obj)
    this.props.ChangeAboutMoneyActivate({
      activate: true,
      is_recharge: true
    })
    console.log("点击充值")
  }

  render() {
    // 获得提交的状态
    const {popupState} = this.props
    return (
      <div>
        <Modal
          visible={popupState.activate}
          title="系统提示"
          onCancel={this.handleCancel}
          footer={[
            <Button 
              key="submit" 
              type="primary" 
              onClick={
                // 会出现两种现象：
                // 1、未登录：左边：取消， 右边：登录
                // 2、登录： 左边：提现 ， 右边：充值
                popupState.btn_left !== '取消' 
                  ? 
                  this.handelWithdraw // 提现
                  : 
                  this.handleCancel}>
              {popupState.btn_left}
            </Button>,
            <Button
              key="submit1"
              type="primary"
              onClick={
                popupState.btn_right === '登录'
                  ?
                  this.hadleOk_login
                  :
                  this.handleRecharge // 充值
                  // popupState.btn_right === '退出登录'
                  //   ?
                  //   this.handleOk_logout
                  //   :
                  //   this.handleOk_right
              }
            >
              {popupState.btn_right}
            </Button>,
          ]}
        >
          <p>{popupState.content}</p>
        </Modal>
      </div>
    );
  }
}

export default connect(
  state => ({
    popupState: state.Popup.popup,
    userState: state.PublicReducer.PublicReducer
  }),
  {
    PopupActivate,
    DoLogin,
    IsUserLogin,
    ChangeAboutMoneyActivate,
  }
)(Pupup)
